<template>
	<view class="wrap">
		<view class="">
			<view class="wraps">
				<view class="hearImage">
					<image mode="aspectFit" class="backfroundImage" src="/static/aidex/images/0e159d0c339c2ce523d4d57fc50e50c.png"></image>
				</view>
				<view class="topTitle">
					<view class="headInfo headPhoto" @click="isShowPopup">
						<u-avatar class="avatar" size="200" :src="imageBase64"></u-avatar>
					</view>
				</view>
				<view class="info">
					<view class="item iconfont icon-gongwujiedain">
						<image class="iconFonts" src="/static/aidex/images/myPh.png"></image><text>昵称:
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text><text>{{userName}}</text>
					</view>
					<view class="item">
						<image class="iconFonts" src="/static/aidex/images/home.png"></image><text space="ensp">所属厂站:
						</text><text>{{orgainName}}</text>
					</view>
					<view class="item">
						<image class="iconFonts" src="/static/aidex/images/role.png"></image><text space="ensp">角色:
						</text><text>{{role}}</text>
					</view>
				</view>
			</view>
			<view class="exitButton">
				<u-button :ripple="true" class="buttonExit" ripple-bg-color="#909399" type="primary"
					@click="logout">退出账号</u-button>
			</view>
		</view>

		<!-- pop弹出层 -->
		<view class="dialog">
			<u-popup v-model="show" mode="bottom" height="30%" border-radius="14" @close="close"
				:mask-close-able="false">
				<view class="list" @click="updateHeadPortrait">
					<text>更换头像</text>
				</view>
				<view class="list" @click="viewPhoto">
					<text>查看大图</text>
				</view>
				<view class="list" @click="close">
					<text>取消</text>
				</view>
			</u-popup>
		</view>
		
		<view class="dialog" >
			<u-popup v-model="photoBigShow" mode="center">
			<view id="imagePopup">
				<img :src="imageBase64" id="popupImage"  style="width: 600rpx; height: 600rpx;"/>
				
				<span id="closeButton" @click="closePopup()"
					style="position: absolute; top: 0; right: 0; background-color: #fff; color:black; padding: 5px;"><strong>X</strong></span>
			</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				iconSize: 38,
				userName: 'user',
				orgainName: 'station',
				role: 'user',
				imageBase64: '',
				show: false,
				imageData64: '',
				photoBigShow: false
			};
		},
		created(){
		   this.getUser();
		},
		onLoad() {
			this.getImageBase64();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			getUser(){
				let name = uni.getStorageSync('username');
				console.log("当前用户名字", name);
				//获取当前登录用户信息
				this.$u.api.userInfo({
						"algorithmProcessId": "getUserName",
						"param": {
							"data": {
								"userName": uni.getStorageSync('username')
							}
						}
					})
					.then(result => {
						console.log("用户", result);
						this.userName = result.data.data.result[1].name;
						this.orgainName = result.data.data.result[1].resultcz;
						this.role = result.data.data.result[1].resultRole;
						let images = result.data.data.result[1].image_base64;
						// var img = new Image();
						// img.src = images;
						this.imageBase64 = images;
						//this.imageData64 = images;
					});	
			},
			getImageBase64() {
				uni.$on('uAvatarCropper', path => {
					this.imageData64 = path;
					// var img = new Image();
					// img.src = this.imageData64;
					this.imageBase64 = path;
					this.close();
				})
			},
			//退出登录
			logout() {
				uni.clearStorageSync();
				// uni.removeStorageSync("token");
				// uni.removeStorageSync("uuid");
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/sys/login/index'
					});
				}, 500);
			},
			isShowPopup() {
				this.show = !this.show;
			},
			close() {
				this.show = false;
			},
			//显示图片弹框
			toggleImageSize(url) {
				console.log("大图")
				this.show1=true;
			},
			//查看大图
			viewPhoto() {
				this.show = false;
				this.photoBigShow = true;
				let url = this.imageBase64;
				this.toggleImageSize(url);
			},
			//关闭放大的图片
			closePopup() {
				this.photoBigShow=false;
				console.log("关闭")
			},
			//更换头像
			updateHeadPortrait() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 200, // 输出图片宽高
						rectWidth: 200, // 裁剪框的宽高
						fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					}
				})
			}
		},
		onTabItemTap: function(e) {
			console.log("跳转了", e)
		}

	};
</script>
<style lang="scss">
	@import '../style/index.scss';
</style>